Mi problema es que estoy tratando de editar una función, por lo que tengo dos funciones, una para recuperar la función y sus permisos y otra para recuperar todos los permisos. Estoy tratando de hacer un bucle v-for anidado para mostrar todos los permisos y verificar el que ya estaba seleccionado. todo funciona bien pero no puedo mostrar todos los permisos por alguna razón. Hay un permiso más llamado "Eliminar usuario" que no aparece. de todos modos, el problema es 100% del lado de la plantilla.

 <div class="container" v-for="(mission,key,index) in permissions" :key="key"> <div class="form-group" v-for="(per,key,index) in selected" :key="key" v-if="mission.id == per.id"> <input type="checkbox" v-model="mission[key]" checked >{{mission.name}} <div v-if="mission.id !== per.id"> <input type="checkbox" v-model="mission[key]">{{mission.name}} <p>fucking hell</p> </div> </div> </div>

 <script> export default { data(){ return{ role:'', permissions:[], selected:[], } }, mounted(){ this.showRole() this.getPermissions() }, methods:{ showRole(){ this.axios.get(`/api/role/${this.$route.params.id}`).then(response=>{ const{role ,selected}= response.data this.role= role this.selected = selected }).catch(error=>{ console.log(error) }) }, getPermissions(){ this.axios.get('/api/permissions').then(response=>{ this.permissions =response.data }).catch(error=>{ console.log(error) }) }, } } </script>

aquí hay una imagen de la API que devuelve todos los permisos. puede ver que eliminar usuario está allí al final.

ingrese la descripción de la imagen aquí